<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
	<meta charset="utf-8">
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta content="width=device-width, minimum-scale=1,initial-scale=1, maximum-scale=1, user-scalable=1" id="viewport" name="viewport" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta content="telephone=no" name="format-detection" />
	<link type="text/css" rel="stylesheet" href="../../template/css/com/com.css"/>
	<link type="text/css" rel="stylesheet" href="../../template/css/list/style.css"/>
	<link rel="stylesheet" href="../../resource/weuimin.css" />
    <link rel="stylesheet" href="../../resource/jinsuistyle.css" />
	<script src="../../template/js/jquery.js"></script>
	<script src="../../template/js/com/com.js"></script>
	<script src="../../template/js/com/template.js"></script>
	<script src="../../resource/my.js"></script>
	<script src="../../script/api.js"></script>
	
    <style type="text/css">

    	
		.first-select-table {
			border-top: 1px solid #005DA9;
			border-bottom: 1px solid #005DA9;
			width: 100%;
			height: 40px;
		}
		.first-select-table tr td{
			width:33%;
			margin: 0;
			padding: 0;
		}
		
		.content li {
            padding-bottom: 10px;
            margin: 10px;
            border-bottom: 1px solid #D8D8D8;
            
        }
        .content{
        	height:100%;
        	overflow: auto; /* auto | scroll */
    		-webkit-overflow-scrolling: touch;
        }	
        .item, .text {
            display: -webkit-box;
        }
        
        .img {
            width: 80px;
            height: 80px;
        }
        
        img {
            width: 100%;
            display: block;
        }
        
        .text {
            -webkit-box-flex: 1;
            -webkit-box-orient: vertical;
            margin: 0 5px;
        }
        
        .text-price {
            padding: 2px 0;
        }

        .new-price {
        	line-height:22px;
            font-size: 20px;
            color: #ff7c70;
            font-family: Impact, Arail, sans-serif;
            font-weight: bold;
        }
        
        .text-price del, .icon-heart {
            margin-left: 15px;
        }
        
        .text-price del, .icon-people + span, .icon-heart + span {
            color: #8c8c8c;
            font-size: 10px;
    
        }
        
        .icon {
            background-size: 12px;
            background-position: center center;
            background-repeat: no-repeat no-repeat;
            display: inline-block;
            height: 12px;
            width: 12px;
        }
        
        .icon-people {
            background-image: url("../image/dock_icon_my_tuniu@2x.png");
        }

        .icon-heart {
            background-image: url("../image/heart@2x.png");
        }
        
	    .content1 {
	        -webkit-box-flex: 1;
	    }
	    .address {
	    	
	    	margin-left: 5px;
	    	line-height: 18px;
	    }
	
	    .cities{
	    	width:100%;
	    	
	    	font-size: small;
	    	line-height:25px;
	    	margin-top: 10px;
	    	border-bottom: 1px solid #005DA9;
	    	color: #005DA9;
	    	padding-left: 10px;
	    }
	 
	   .qxmc{
	   		width:17%;
	   		display:block;
	   		float:left;
	   		
	   		text-align:center;
	   		margin-left: 2%	
	   }
	   .qxmc-max{
			width:33%;
	   		display:block;
	   		float:left;
	   		text-align:center;	   
	   }
	   .jsdb{
	   		position: absolute;
	   		bottom: 0;
	   }
        </style>
        <!-- <script language="javascript" src="http://count26.51yes.com/click.aspx?id=268836397&logo=12" charset="gb2312"></script> -->
        <script type="text/javascript">
         	var cityCode;
          	var disCode;
          	var jqCode;
         	window.apiready = function() {
	          	var jqCityCode = api.pageParam.cityCode;
	          	var jqDisCode = api.pageParam.disCode;
	          	jqCode = api.pageParam.jqCode;
	          	var name = api.pageParam.name;
	       		alert(jqCode);
	          
	          	if(name+""!=""){
	          		$("#openArea").text(name);
	          	}
	      	 	var openArea = document.getElementById('openArea');
	      	 	var timeRecord = {
	      	 		startTime:'',
	      	 		endTime:'',
	      	 		changeTime:''
	      	 	}
	      	 	openArea.addEventListener('touchstart',touchstartFn);
	      	 	openArea.addEventListener('touchend',touchendFn);
	      	 	function touchstartFn(){
	      	 		timeRecord.startTime = new Date().getTime();
	      	 		openArea.style.color = "#660099";
	      	 	}
	      	 	
	      	 	function touchendFn(){
	      	 		timeRecord.endTime = new Date().getTime();
	      	 		timeRecord.changeTime = timeRecord.endTime - timeRecord.startTime;
	      	 		if(timeRecord.changeTime<300){
	      	 			opennima();
	      	 		}
	      	 		openArea.style.color = "#005DA9";
	      	 	}
	      	 	var msg = api.pageParam.msg;
	      	 	var title = api.pageParam.title;
	      	
	      	 	if(msg=null&&title!=null){
	      			$api.text(openArea, title);
	      	 	}
	      	 	if(msg!=null){
	      	 		$api.text(openArea, msg);
	      	 	}
	      	 
	        	/* 智能调整顶部导航栏 */
	        	// var header = $api.byId('js-com-header-area');
	        	var header = $api.byId('jsheader');
	        	if(api.systemType=='ios'){
	    			$api.fixIos7Bar(header);
	    		}
	    		//若景区的地址编码不为空，则获取该景区的酒店列表
	    		if(jqCode!=null){
	    			getList(0,2,0,0,jqCode);
	    			$('#openArea').text(name);
	    		}else{
	    			getList(1,2,0,0,0);
	    		}
	    	}
	    	
	      	 	
	        //获取四川省酒店列表
	        function opennima(){		        
		      	
		 		api.ajax({
	                  url:'https://wechat.scjinsui.com:443/weixin/jdyd/dzxx.do?dm=510000',
			          method: 'get',
			          cache: 'false',
			          timeout: 30,
			          dataType: 'json'
                 },function(ret,err){
                 	var cities = document.getElementById('cities');
                 	//隐藏或展开城市列表
		 			if(cities.hidden){
		 				cities.hidden = false;
		 			}else{
		 				cities.hidden = true;
		 			}
                 	var data = eval('('+ret.list+')');
                 	//alert(JSON.stringify(data));
              
                 	var html;
                 	
                 		html = '<tr>'+
								'<th>'+
									'<td onclick=openThisCity(0,"全部")>全部</td>'+
									'<td onclick=openThisCity("'+data[13].DM+'","'+data[13].MC+'")>'+data[13].MC+'</td>'+
									'<td onclick=openThisCity("'+data[0].DM+'","'+data[0].MC+'")>'+data[0].MC+'</td>'+
									'<td onclick=openThisCity("'+data[1].DM+'","'+data[1].MC+'")>'+data[1].MC+'</td>'+
									'<td onclick=openThisCity("'+data[2].DM+'","'+data[2].MC+'")>'+data[2].MC+'</td>'+
								'</th>'+
							'</tr>'+
							'<tr>'+
								'<th>'+
									
									'<td onclick=openThisCity("'+data[6].DM+'","'+data[6].MC+'")>'+data[6].MC+'</td>'+
									'<td onclick=openThisCity("'+data[7].DM+'","'+data[7].MC+'")>'+data[7].MC+'</td>'+
									'<td onclick=openThisCity("'+data[8].DM+'","'+data[8].MC+'")>'+data[8].MC+'</td>'+
									'<td onclick=openThisCity("'+data[9].DM+'","'+data[9].MC+'")>'+data[9].MC+'</td>'+
									'<td onclick=openThisCity("'+data[14].DM+'","'+data[14].MC+'")>'+data[14].MC+'</td>'+
								'</th>'+
							'</tr>'+
							'<tr>'+
								'<th>'+
									'<td onclick=openThisCity("'+data[16].DM+'","'+data[16].MC+'")>'+data[16].MC+'</td>'+
									'<td onclick=openThisCity("'+data[17].DM+'","'+data[17].MC+'")>'+data[17].MC+'</td>'+
									'<td onclick=openThisCity("'+data[18].DM+'","'+data[18].MC+'")>'+data[18].MC+'</td>'+
									'<td onclick=openThisCity("'+data[19].DM+'","'+data[19].MC+'")>'+data[19].MC+'</td>'+
									'<td onclick=openThisCity("'+data[20].DM+'","'+data[20].MC+'")>'+data[20].MC+'</td>'+
								'</th>'+
							'</tr>'+
							'<tr>'+
								'<th>'+
									'<td onclick=openThisCity("'+data[15].DM+'","'+data[15].MC+'")>'+data[15].MC+'</td>'+
									'<td onclick=openThisCity("'+data[5].DM+'","'+data[5].MC+'")>'+data[5].MC+'</td>'+
									'<td onclick=openThisCity("'+data[3].DM+'","'+data[3].MC+'")>'+data[3].MC+'</td>'+
									'<td colspan="2" onclick=openThisCity("'+data[10].DM+'","'+data[10].MC+'")>'+data[10].MC+'</td>'+
								'</th>'+
							'</tr>'+
							'<tr>'+
								'<th>'+
									'<td  onclick=openThisCity("'+data[4].DM+'","'+data[4].MC+'")>'+data[4].MC+'</td>'+
									'<td colspan="2" onclick=openThisCity("'+data[11].DM+'","'+data[11].MC+'")>'+data[11].MC+'</td>'+
									'<td colspan="2" onclick=openThisCity("'+data[12].DM+'","'+data[12].MC+'")>'+data[12].MC+'</td>'+
								'</th>'+
							'</tr>';	
                 	//alert(html);
                 	$("#cities").html(html);
                 	
                 });
		 		
	        }
	        /**
	         *根据城市地址编码获取该市县级地区 
	         */
	        function openThisCity(DM,MC){
	        	cityCode=DM;
	        	disCode=0;
	        	if(MC=="全部"){//这里设“全部”为四川省所有市级地区
	        		$("#openArea").text('四川省');
	        		getList(0,2,cityCode,0);
	        		var cities = document.getElementById('cities');
	        		cities.hidden=true;
	        		return false;
	        	}else{
	        		$("#openArea").text(MC);
	        	}
	        	//alert(cityCode);
	        	
	        	api.ajax({
	                 url:'https://wechat.scjinsui.com:443/weixin/jdyd/dzxx.do?dm='+cityCode,
			            method: 'get',
			            cache: 'false',
			            timeout: 30,
			            dataType: 'json'
                },function(ret,err){
                	var data = eval('('+ret.list+')');
                	var cities = document.getElementById('cities');
                	//alert(JSON.stringify(data));
                	//alert(data[0].MC);
                	var html="";
                	//判断返回数据量的大小，选择合适的排列方式
                    if(data.length<=18){
                    	html += '<span class="qxmc-max" onclick=openThis(0,"全部","'+cityCode+'","'+MC+'")>全部</span>';
                    	for(var i=0;i<data.length;i++){
                 		if((i+1)!=0&&(i+1)%3==0){//换行
                 			html +=  '<br/><span class="qxmc-max" onclick=openThis("'+data[i].DM+'","'+data[i].MC+'","'+cityCode+'","'+MC+'")>'+data[i].MC+'</span>'
                 		}else{
                 			html += '<span class="qxmc-max" onclick=openThis("'+data[i].DM+'","'+data[i].MC+'","'+cityCode+'","'+MC+'")>'+data[i].MC+'</span>'
                 		}
                 	}
					//alert(html);
					$("#cities").html(html);
					return false;
                    }
                    //alert(realLen);
                    //判断返回数据量的大小，选择合适的排列方式
                 	if(data.length>18){
                 		html += '<span class="qxmc" onclick=openThis(0,"全部","'+cityCode+'","'+MC+'")>全部</span>';
                 		for(var i=0;i<data.length;i++){
                 		if((i+1)!=0&&(i+1)%5==0){
                 			html +=  '<br/><span class="qxmc" onclick=openThis("'+data[i].DM+'","'+data[i].MC+'","'+cityCode+'","'+MC+'")>'+data[i].MC+'</span>'
                 		}else{
                 			html += '<span class="qxmc" onclick=openThis("'+data[i].DM+'","'+data[i].MC+'","'+cityCode+'","'+MC+'")>'+data[i].MC+'</span>'
                 		}	
                 	}
					//alert(html);
					$("#cities").html(html);
					return false;
                 	}
                });
	        	
	        }
	        //根据地址编码获取某市县级地区
	        function openThis(disDM,MC,cityDM,cityMC){
	        	if(MC=='全部'){//全市
	        		$("#openArea").text(cityMC);
	        		getList(0,2,cityDM,0,0);
	        		var cities = document.getElementById('cities');
		       		cities.hidden = true;
		       		return false;
	        	}else{
	        		$("#openArea").text(cityMC+MC);
	        	}
	        	disCode = disDM;
	        	//alert(disDM);
	        	getList(0,2,cityDM,disCode,0);
		        var cities = document.getElementById('cities');
		        	
		        cities.hidden = true;
	        	
	        }
			function toDetail(id){
	  			api.openWin({
	        	name: 'hotel_main_info',
	        	url: './hotel_main_info.html',
	        	pageParam:{
	        		id:id
	        	}
        });
	}
	/**
	 *getList 获取酒店列表
	 *param num1 星级排序标志
	 *param num2 价格排序标志
	 *param cityDM 市级地区编码
	 *param disDM 县级地区编码
	 */
	function getList(num1,num2,cityDM,disDM,jqCode){

	
		//alert(num1+","+num2+","+cityDM+","+disDM);
		$("#loadingToast").show();
		api.ajax({//http://192.168.191.2:8080/weixin/unionPay/qrcode.do?dlPhone
	            url:'https://wechat.scjinsui.com:443/weixin/jdyd/list.do?xj='+num1+'&price='+num2+'&cityCode='+cityDM+'&disCode='+disDM+'&jqCode='+jqCode,
	            method: 'get',
	            cache: 'false',
	            timeout: 30,
	            dataType: 'json'
            },function(ret,err){
	            var data = eval("("+ ret.list +")");
	            var json = JSON.stringify(data);
	          	//alert(json);
				var html="";
				
	            for(var i=0;i<data.length;i++){
	            	if(data[i].picUrl!=null){
	            		var pic = data[i].picUrl.split(",");
	            		
	            	
	            		html += '<li onclick=toDetail("'+data[i].id+'")>'+
						        '<div class="item" id="delete">'+
						            '<div class="img">'+
						                '<img src="'+pic[0]+'" style="height:100%;">'+
						            '</div>'+
						            '<div class="text">'+
						                '<div class="text-title" style="font-size:large;font-weight:bold;">'+data[i].name;
						if(data[i].start!=null && data[i].start!=""){
							html += '<span style="font-size:medium;color:#ff7c70;padding-left:8px;">'+data[i].start+'星</span>';
						}                
						html +=  '</div><div class="text-price">';
						if(data[i].minPrince==null){
							html += '<span class="new-price">￥200</span>';
						}else{
							html += '<span class="new-price">￥'+data[i].minPrince+'</span>';
						}
						                    
						     html += '<span style="color:#ff7c70;line-height:0;">起</span>'+
						                '</div>'+
						                '<div class="address">地址：'+data[i].address+'</div>'+
						            '</div>'+
						        '</div>'+
						    '</li>';
	            	}
	            	
					
	            } 
	            $('#hotelList').html(html);
	          
            });
            $("#loadingToast").hide();
	}
	function hdpic(){
		
	}
	function starOrder(num){
		var starS = document.getElementById('starS');
		var starJ = document.getElementById('starJ');
		if(cityCode==null&&disCode==null){
			cityCode=0;
			disCode=0;
		}
		if(cityCode!=null&&disCode==null){
			disCode=0;
		}
		
		if(starS.hidden){
			getList(0,2,cityCode,disCode,jqCode);
			starS.hidden=false;
			starJ.hidden=true;
		}else{
			getList(1,2,cityCode,disCode,jqCode);
			starJ.hidden=false;
			starS.hidden=true;
		}
		
	}	
	function priceOrder(){
		var priceS = document.getElementById('priceS');
		var priceJ = document.getElementById('priceJ');
		if(cityCode==null&&disCode==null){
			cityCode=0;
			disCode=0;
		}
		if(cityCode!=null&&disCode==null){
			disCode=0;
		}
		
		if(priceS.hidden){
			getList(2,0,cityCode,disCode);
			priceS.hidden=false;
			priceJ.hidden=true;
		}else{
			getList(2,1,cityCode,disCode);
			priceJ.hidden=false;
			priceS.hidden=true;
		}
	}	
	      
 </script>
 </head>
    <body>
    
      <div id="jsheader" style="height:8%;">
          <nav id="jsnav">
              <a id="jsleft" tapmode="" onclick="api.closeWin();">
                  <span>返回</span>
              </a>
              <div id="jsmiddle">
                  <strong id="jstitle" style="margin-right: 30px;">酒店预订</strong>
              </div>
              <a id="jsright">
                <span></span>
              </a>
          </nav>
      </div>
	<div class="com-content" style="height:85%; ">

		<div style="height:30%;">
		
				<img src="../../image/myHote2.jpg" style="width:100%;height: 100%;"/>
		
		</div>
		<table class="first-select-table" id="">
			<tr>
				<td id="openArea" style="color: #005DA9;text-align: center;">
					四川省
				</td>
				<td><input type="button" style="margin-left: 0;" onclick="starOrder(0,2)" value="星级排序"/><span id="starJ" style="font-size: x-large;">&darr;</span><span id="starS" hidden="hidden" style="font-size: x-large;">&uarr;</span></td>
				<td><input type="button" style="margin-left: 0;" onclick="priceOrder()" value="价格排序"/><span id="priceJ" style="font-size: x-large;">&darr;</span><span id="priceS" hidden="hidden" style="font-size: x-large;">&uarr;</span></td>
			</tr>
		</table>
		<table id="cities" class="cities" hidden="hidden">
			
		</table>
		<div style="height: 60%;">
		
			<ul class="content" id="hotelList">
			 	
			    
			</ul>
		
		</div>
	</div>
	<!-- 加载动画 -->
	<div id="loadingToast" style="display:none;">
			<div class="weui-mask_transparent"></div>
			<div class="weui-toast">
				<i class="weui-loading weui-icon_toast"></i>
				<p class="weui-toast__content">数据加载中...</p>
			</div>
		</div>
	<!-- 公共底部，必须引用 -->
		
			<div class="com-footer-area footer" id="js-com-footer" style="width:100%;height: 8%;">
				<img src="../../image/db.png" style="width:100%;"/>
			</div>
	
</body>

</html>
